<template>
  <div class="elm-edit one_road">
  <elm-page-bb class="ei_edit" v-loading="loading">

    <el-form ref="model" :model="model" size="small" label-width="135px">
      <elm-row>
        <el-form-item label="标题" prop="title" :rules="[{ required: true, message: '标题 必须填写'}]">
          <el-input v-model="model.title"></el-input>
        </el-form-item>
      </elm-row>
      <elm-row>
        <el-form-item label="类别" prop="type" :rules="[{ required: true, message: '类别 必须选择'}]">
          <el-select v-model="model.type" size="mini" style="width:120px;">
            <el-option
                v-for="item in itemTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </elm-row>
      <elm-row>
        <el-form-item label="内容是否必填">
          <el-switch v-model="model.e_require" active-text="必填" inactive-text="非必填"></el-switch>
        </el-form-item>
      </elm-row>
      <elm-row v-if="model.type=='input'">
        <el-form-item label="内容是否为纯数字">
          <el-switch v-model="model.e_number" active-text="内容为纯数字" inactive-text="不限制内容"></el-switch>
        </el-form-item>
      </elm-row>
      <elm-row v-show="false">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="2" v-model="model.remark"></el-input>
        </el-form-item>
      </elm-row>
    </el-form>

    <el-card v-show="model.type == 'select'" style="margin-right: 0;margin-left: 0;height: 290px;" shadow="hover">
      <div slot="header">
        <span style="font-weight: bold;">配置选择的选项</span>
        <el-button type="text" size="mini" @click="v_addItem_ss" style="float: right; padding: 3px 0">新增</el-button>
      </div>
      <elm-table :data='model.s_item' :stripe='true' :border='true' size='mini'
                 style="width: 100%;height: 235px;" :page-size="9999">
        <el-table-column label="选项" min-width="220px" align="center">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.title"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button @click="v_moveItem_ss(scope.$index,'up')" type="text" size="mini"
                       :disabled="scope.$index==0">
              上移</el-button>
            <el-button @click="v_moveItem_ss(scope.$index,'down')" type="text" size="mini"
                       :disabled="scope.$index==model.s_item.length-1">
              下移</el-button>
            <el-button @click="v_deleteItemss(scope.$index)" type="text" size="mini" >
              删除</el-button>
          </template>
        </el-table-column>
      </elm-table>
    </el-card>

    <template #bottom>
      <el-button type="success" size="small" @click="submit">立即保存</el-button>
      <el-button size="small" @click="close">取消</el-button>
    </template>
  </elm-page-bb>
  </div>
</template>

<script>
export default {
  extends: elmVueBase,
  data() {
    return {
      loading:true,

      DE_INFO: null,
      edit_type: '',

      flow_model:{},
      flowExist:false,
      on_canvas:null,

      model: {},

      itemTypeList:[
          {'name':'填写','value':'input'},{'name':'日期','value':'date'},{'name':'时间','value':'time'},{'name':'日期时间','value':'datetime'},
          {'name':'大文本','value':'text'},
          {'name':'选择','value':'select'},{'name':'附件','value':'file'},
          {'name':'选择部门','value':'select_org'},{'name':'选择人员','value':'select_ei'},//{'name':'选择账号','value':'select_user'},
          {'name':'报销项','value':'bx_item'},{'name':'关联项目','value':'select_input_pj'},
          {'name':'选择车辆','value':'select_car'},
          {'name':'关联线索','value':'select_input_xs'},{'name':'关联商机','value':'select_input_sj'},
          {'name':'采购信息','value':'select_input_pu'},
      ],

      sItemList:[],
    }
  },
  mounted() {
    this.DE_INFO = elm.dialog.request;
    this.edit_type = this.DE_INFO.edit_type;
    this.flow_model = this.DE_INFO.flow_model;
    this.on_canvas = this.DE_INFO.on_canvas;

    this.v_getData();
  },
  methods: {
    async v_getData(){
      this.loading = true;

      if(this.edit_type=='create'){
        this.model = {
          'id': elm.newGuid(),
          'type': this.itemTypeList[0].value,
          's_item': [],
        };
      }
      else{
        this.flowExist = true;
        this.model = this.DE_INFO.model;
      }

      //如果流程尚未入库，那么先保存流程
      let check = await elm.post('/system/flow/one_road_flow/GetFlowList', { "id": this.flow_model.id});
      if (check.length>0) {
        this.flowExist = true;
        //this.DE_INFO.callVue.setFLowExist(true);
      }
      else{
        if (this.em(this.flow_model.title)){this.$message.error('缺少流程名称'); this.v_cancle();return;}
        if (this.em(this.flow_model.code)){
          let cData = await elm.post('/system/flow/one_road_flow/GetFlowCodeForCreate', {});
          if(this.em(cData.code) || cData.code.indexOf('flow_')<0){
            this.$message.error('流程编码生成失败，请稍后尝试。');
            this.loading = false;
            return;
          }
          this.flow_model.code = cData.code;
        }
        if(this.em(this.flow_model.order_number)){this.flow_model.order_number = this.flow_model.code;}
        let check = await elm.post('/system/flow/one_road_flow/GetFlowList', { "code": this.flow_model.code});
        if (check.length>0 && check[0].id !=this.flow_model.id) { this.$message.error('流程编码重复'); this.v_cancle();return;}

        if(!this.em(this.flow_model.secForm_tableName)){
          this.flow_model['ff_tablename'] = 'biz_'+this.flow_model.secForm_tableName;
        }
        else{ this.flow_model['ff_tablename'] = 'biz_'+this.flow_model.code; }

        this.flow_model['on_canvas'] = this.on_canvas;
        let saveFlag = await elm.post('/system/flow/one_road_flow/UpserFlowAndSecForm', {'model':this.flow_model});
        if (saveFlag==false){this.$message.error('流程保存失败'); this.v_cancle();return;}

        this.DE_INFO.callVue.setFLowExist(true);
      }

      this.loading = false;
    },

    async submit() {
      try{await this.$refs["model"].validate();}catch{console.log('表单验证未通过'); return;}

      let data = this.model;
      if(data.type!='select'){data.s_item = [];}

      if(this.edit_type=='create'){
        this.DE_INFO.callVue.v_addOne_ffItem(data);
      }
      else{
        this.DE_INFO.callVue.v_changeOne_ffItem(data);
      }
      this.v_cancle();
    },
    v_cancle:function (){
      this.close();//extends: elmVueBase
    },

    v_addItem_ss:function (){
      this.model.s_item.push({'title':''});
    },
    v_moveItem_ss:function (index,type){
      let nIndex = type=='up'?index-1:index+1;
      let newList = [];
      for(let i=0;i<this.model.s_item.length;i++){
        if(i!=index&&i!=nIndex){newList.push(this.model.s_item[i]);}
        else if(i==index){newList.push(this.model.s_item[nIndex]);}
        else if(i==nIndex){newList.push(this.model.s_item[index]);}
      }
      this.model.s_item = newList;
    },
    v_deleteItemss:function (index){
      this.model.s_item.splice(index, 1);
    },

    em: function (s) {
      if (s == null || s == '') { return true; }
      else { return false; }
    },

  }
}
</script>
<style>
.one_road .elm-body{padding: 5px;}
</style>